<template>
	<z-paging ref="pagingRef" v-model="dataList" @query="queryList">
		<template #top>
			<!-- 日期筛选 -->
			<view class="deduction-details-date-box" @tap="showSelectDate">
				<text>{{dayjs(selectDateValue).format('YYYY年MM月')}}</text>
				<xh-icon icon="icon_shanglajiantou"></xh-icon>
			</view>
		</template>
		<view class="deduction-details-layout">
			<!-- 列表 -->
			<view class="deduction-details-list">
				<view class="deduction-details-list-item" v-for="item in dataList" :key="item.txnLogId">
					<view class="deduction-details-list-item-top">
						<text>{{item.remark}}</text>
						<text class="deduction-details-list-item-top-text">-{{item.txnAmt}}</text>
					</view>
					<text class="deduction-details-list-item-text1">{{item.txnLogId}}</text>
					<text class="deduction-details-list-item-text1">{{item.createTime}}</text>
					<view class="line"></view>
				</view>
			</view>
			<uv-datetime-picker ref="datePicker" v-model="selectDateValue" mode="year-month" @confirm="confirm"></uv-datetime-picker>
		</view>
	</z-paging>

</template>

<script setup>
	import { onLoad } from '@dcloudio/uni-app'
	import { ref } from 'vue'
	import dayjs from 'dayjs'
	import { getGoodsBillDetailList } from '@/common/api/api.js'
	const props = defineProps(['type','agentId'])
	const datePicker = ref(null)
	const selectDateValue = ref(Number(new Date()))
	const dataList = ref([])
	const pagingRef = ref(null)
	// 选择日期
	const showSelectDate = () => {
		datePicker.value.open()
	}
	// 日期选择回调
	const confirm = (res) => {
		selectDateValue.value = res.value
		pagingRef.value.reload()
	}
	// 获取列表数据
	const queryList = async (pageNo) => {
		let params = {}
		if(!uni.$uv.test.empty(props.agentId)){
			params.agentId = props.agentId
		}
		if(props.type == '货款'){
			params.accDefStatus = '1'
			params.inOutFlag = 'O'
			params.txnNum = 'P002'
		}
		else{
			params.accDefStatus = '3'
			params.inOutFlag = 'O'
			params.txnNum = 'P004'
		}
		const startDate = dayjs(selectDateValue.value).startOf('month').format('YYYY-MM-DD')
		const endDate = dayjs(selectDateValue.value).endOf('month').format('YYYY-MM-DD')
		params.startDate = startDate
		params.endDate = endDate
		console.log(params)
		const res = await getGoodsBillDetailList(params, pageNo)
		const list = res.result
		if(pageNo == 1) {
			dataList.value = []
		}
		dataList.value = [...dataList.value,...list]
		pagingRef.value.completeByTotal(list,res.page.totalElements)
	}
	onLoad(() => {
		uni.setNavigationBarTitle({
			title: `${props.type}抵扣明细`
		})
	})
</script>

<style lang="scss" scoped>
	.deduction-details-date-box {
		display: flex;
		align-items: center;
		padding: 20rpx 30rpx;
	}
	.deduction-details-layout {
		.deduction-details-list {
			background-color: #fff;

			.deduction-details-list-item {
				display: flex;
				flex-direction: column;
				padding: 30rpx;
				position: relative;

				.deduction-details-list-item-top {
					display: flex;
					align-items: center;
					justify-content: space-between;
					font-size: 26rpx;

					.deduction-details-list-item-top-text {
						color: #356C06;
					}
				}

				.deduction-details-list-item-text1 {
					margin-top: 10rpx;
					color: $xh-color-6;
					font-size: 26rpx;
				}
			}
		}
	}
</style>